

$(function () {
    //vue获取数据
    var vm = new Vue({
        el: "#vueBox",
        data: {
            pageSize:5,
            pageNum:1,
            keyword:"",
            MyData:{},
            roleIdArray:[],
        },
        methods: {
            selectByKey: function(pageNum) {
                axios.get("http://localhost:8080/role/search/by/keyword",{
                    params: {
                        pageSize: this.pageSize,
                        pageNum:this.pageNum,
                        keyword:this.keyword
                    }
                }).then(res => {
                    if(res.data.result === "SUCCESS"){
                        this.MyData = res.data.data;
                        // console.log(this.MyData)
                        this.initPagination();
                     }
                })
            },

            searchBtnClick:function(){
                // 验证输入数据是否有效
                if(this.keyword == null || this.keyword == "") {
                    // 如果无效，提示，停止函数执行
                    layer.msg("请输入关键词！");
                    return ;
                }
                this.selectByKey(1);
            },

            // 声明函数封装导航条初始化操作
            initPagination: function () {
                // 声明变量存储总记录数
                //获取总行数
                var totalRecord = [[this.MyData.total]];
                // 声明变量存储分页导航条显示时的属性设置
                var paginationProperties = {
                    num_edge_entries : 3,        //边缘页数
                    num_display_entries : 5,      //主体页数
                    callback : this.pageselectCallback, //回调函数
                    items_per_page : [[this.MyData.pageSize]],    //每页显示数据数量，就是pageSize
                    current_page : [[this.MyData.pageNum-1]],//当前页页码
                    prev_text : "上一页",       //上一页文本
                    next_text : "下一页"        //下一页文本
                };
                // 显示分页导航条
                //调用它封装好的方法，以显示分页
                $("#Pagination").pagination(totalRecord, paginationProperties);
            },


            // 在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面
            pageselectCallback: function (pageIndex, jq) {
                // pageIndex从0开始，pageNum从1开始
                //网后台传值的时候在加回来
                var pageNum = pageIndex + 1;
                var keyword=$('[name="keyword"]').val();
                // 跳转页面
                this.pageNum = pageNum;
                this.keyword = keyword;
                this.selectByKey();
                return false;
            },
            batchRemoveBtnClick:function () {
                // 获取被选中的itemBox数组长度
                var length = $(".itemBox:checked").length;

                // 如果长度为0，说明没有选择itemBox
                if(length == 0) {
                    layer.msg("请至少选择一条！");
                    return ;
                }


                // 在全局作用域内创建roleIdArray
                var roleIdArray = new Array();

                // 遍历$(".itemBox:checked")
                $(".itemBox:checked").each(function(){

                    // 通过checkbox的roleid属性获取roleId值
                    var roleId = $(this).attr("roleid");
                    // 存入数组
                    roleIdArray.push(roleId);

                });
                this.roleIdArray = roleIdArray;
                // alert(this.roleIdArray);
                window.roleIdArray = this.roleIdArray;
                // 调用函数打开模态框
                this.showRemoveConfirmModal();
            },

            //显示模态框
            showRemoveConfirmModal:function () {
                // 1.将模态框显示出来
                $("#confirmModal").modal("show");


                axios.post("http://localhost:8080/role/get/list/by/id/list",this.roleIdArray).then(res => {
                    if(res.data.result == "SUCCESS") {
                        // 5.如果成功，显示数据
                        // 3.清空#confirmModalTableBody
                        $("#confirmModalTableBody").empty();
                        // 4.填充#confirmModalTableBody
                        var roleList =res.data.data;
                        for(var i = 0; i < roleList.length; i++) {

                            // 5.获取角色相关数据
                            var role = roleList[i];

                            var id = role.id;

                            var name = role.name;

                            var trHTML = "<tr><td>" + id + "</td><td>" + name + "</td></tr>";

                            // 6.执行填充
                            $("#confirmModalTableBody").append(trHTML);
                        }
                    }else{
                        layer.msg(ajaxResult.message);
                        return null;
                    }
                })
            },
            // confirmModalBtnCilck:function () {
            //     console.log(this.roleIdArray)
            //     axios.post("http://localhost:8081/role/batch/remove",this.roleIdArray).then(res => {
            //         var result = res.data.result;
            //         if(result == "SUCCESS") {
            //             layer.msg("操作成功！");
            //             // 如果删除成功，则重新调用分页方法
            //             this.selectByKey(1);
            //         }
            //         if(result == "FAILED") {
            //             layer.msg(res.data.message);
            //         }
            //
            //         // 不管成功还是失败，都需要关掉模态框
            //         $("#confirmModal").modal("hide");
            //      })
            // }

        },
        mounted(){
            this.selectByKey(1);
        },
    });
});




$(function () {
    //实现全选
    $("#summaryBox").click(function() {
        // 获取当前#summaryBox的勾选状态
        // this代表当前多选框对象（DOM对象）
        // checked属性为true时表示被勾选，为false时表示没有被勾选
        // 使用checkStatus设置.itemBox的状态
        //prop与attr都是修改元素属性，但是prop对于新增的元素也有效果
        $(".itemBox").prop("checked",this.checked);
    });

//确认删除
    $("#confirmModalBtn").click(function () {
        var requestBody = JSON.stringify(window.roleIdArray);
        $.ajax({
            url:"/role/batch/remove",
            type:"post",
            data:requestBody,
            contentType:"application/json;charset=UTF-8",
            dataType:"json",
            success:function(response){
                var result = response.result;
                if(result == "SUCCESS") {
                    layer.msg("操作成功！");
                    // 如果删除成功，则重新调用分页方法
                    window.location = "/role/to/page.html";
                }
                if(result == "FAILED") {
                    layer.msg(response.message);
                }
                // 不管成功还是失败，都需要关掉模态框
                $("#confirmModal").modal("hide");

            },
            "error":function(response){
                layer.msg(response.message);
            }
        });
    });

    //添加
    $("#addBtn").click(function(){
        $("#addModal").modal("show");
    });

//确认添加
    $("#addModalBtn").click(function () {
        // 1.收集文本框内容
        var roleName = $.trim($("#roleNameInput").val());
        if(roleName == null || roleName == "") {
            layer.msg("请输入有效角色名称！");
            return ;
        }
        $.ajax({
            url:"/role/save/role",
            type:"post",
            data:{
                "roleName":roleName
            },
            dataType:"json",
            success:function (response) {
                var result = response.result;
                if(result == "SUCCESS") {
                    layer.msg("操作成功！");
                    // 不管成功还是失败，关闭模态框
                    $("#addModal").modal("hide");

                    // 清理本次在文本框填写的数据
                    $("#roleNameInput").val("");
                }else {
                    layer.msg(response.message);
                }
            }
        });
    });

    //修改
    // $("#xg").click(function(){
    //Menu
    MenuExample当前按钮的roleId
    //     // window.roleId = $(this).attr("roleId");
    //     //
    //     // // 2.获取当前按钮所在行的roleName
    //     // var roleName = $(this).parents("tr").children("td:eq(2)").text();
    //     //
    //     // // 3.修改模态框中文本框的value值，目的是在显示roleName
    //     // $("#roleNameInputEdit").val(roleName);
    //
    //     // 4.打开模态框
    //     $("#editModal").modal("show");
    // });

    //确认修改
    // $("#editModalBtn").click(function () {
    //     // 1.获取文本框值
    //     var roleName = $.trim($("#roleNameInputEdit").val());
    //
    //     if(roleName == null || roleName == "") {
    //         layer.msg("请输入有效角色名称！");
    //
    //         return ;
    //     }
    //     $.ajax({
    //         url:"/role/update/role",
    //         type:"post",
    //         data:{
    //             "id":window.roleId,
    //             "name":roleName
    //         },
    //         dataType:"json",
    //         success:function (response) {
    //             var result = response.result;
    //             if(result == "SUCCESS") {
    //                 layer.msg("操作成功！");
    //                 // 3.操作成功重新分页
    //                 showPage();
    //             }
    //             if(result == "FAILED") {
    //                 layer.msg(response.message);
    //             }
    //
    //             // 4.不管成功还是失败，关闭模态框
    //             $("#editModal").modal("hide");
    //         }
    //     });
    // });
});
